<template>
    <div class="member-detail-container">
        <!-- 页面头部 -->
        <div class="page-header">
            <div class="header-content">
                <div class="header-left">
                    <h2>会员信息</h2>
                </div>
                <div class="header-right">
                    <el-button type="primary" :icon="ArrowLeft" @click="goBack">返回</el-button>
                </div>
            </div>
        </div>

        <!-- 会员头部信息 -->
        <div class="member-header">
            <el-card shadow="never" class="header-card">
                <div class="member-profile">
                    <div class="profile-avatar">
                        <el-avatar :size="80" :src="memberInfo.avatar">
                            <el-icon><User /></el-icon>
                        </el-avatar>
                    </div>
                    <div class="profile-info">
                        <div class="info-row">
                            <span class="label">账号：</span>
                            <span class="value">{{ memberInfo.account }}</span>
                        </div>
                        <div class="info-row">
                            <span class="label">昵称：</span>
                            <span class="value">{{ memberInfo.nickname || memberInfo.name }}</span>
                        </div>
                        <div class="info-row">
                            <span class="label">ID：</span>
                            <span class="value">{{ memberInfo.id }}</span>
                        </div>
                        <div class="info-row">
                            <span class="label">VIP等级：</span>
                            <el-tag :type="getLevelTagType(memberInfo.memberLevelName || `VIP${memberInfo.vipLevel}`)">
                                {{ memberInfo.memberLevelName || `VIP${memberInfo.vipLevel}` }}
                            </el-tag>
                        </div>
                        <div class="info-row">
                            <span class="label">注册时间：</span>
                            <span class="value">{{ formatDateTime(memberInfo.registerTime) }}</span>
                        </div>
                        <div class="info-row">
                            <span class="label">最后登录时间：</span>
                            <span class="value">{{ formatDateTime(memberInfo.lastLoginTime) }}</span>
                        </div>
                    </div>
                </div>
            </el-card>
        </div>

        <!-- 基本信息 -->
        <div class="info-section">
            <el-card shadow="never" class="info-card">
                <template #header>
                    <span class="card-title">基本信息</span>
                </template>
                <el-descriptions :column="2" border>
                    <el-descriptions-item label="手机号">{{ memberInfo.phone }}</el-descriptions-item>
                    <el-descriptions-item label="兴趣">{{ memberInfo.interests?.join(', ') || '-' }}</el-descriptions-item>
                    <el-descriptions-item label="生日">{{ formatDate(memberInfo.birthDate) }}</el-descriptions-item>
                    <el-descriptions-item label="用户类型">{{ memberInfo.userTypeName }}</el-descriptions-item>
                    <el-descriptions-item label="现居地址">{{ memberInfo.location }}</el-descriptions-item>
                    <el-descriptions-item label="状态">
                        <el-tag :type="memberInfo.status === 1 ? 'success' : 'danger'">
                            {{ memberInfo.statusName }}
                        </el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="邀请码">{{ memberInfo.inviteCode || '-' }}</el-descriptions-item>
                    <el-descriptions-item label="推荐人">{{ memberInfo.inviterName || '-' }}</el-descriptions-item>
                </el-descriptions>
            </el-card>
        </div>

        <!-- 账号资产 -->
        <div class="assets-section">
            <el-card shadow="never" class="assets-card">
                <template #header>
                    <span class="card-title">账号资产</span>
                </template>
                <el-table :data="assetsData" stripe border v-loading="loading">
                    <el-table-column type="index" label="序号" width="80" align="center" />
                    <el-table-column prop="assetType" label="资产类型" />
                    <el-table-column prop="assetName" label="资产名称" />
                    <el-table-column prop="quantity" label="数量" align="center" />
                    <el-table-column prop="unit" label="单位" align="center" />
                    <el-table-column prop="value" label="价值" align="center">
                        <template #default="{ row }">
                            {{ row.value }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="expireDate" label="过期时间" width="150" />
                    <el-table-column prop="status" label="状态" width="100" align="center">
                        <template #default="{ row }">
                            <el-tag :type="row.status === '有效' ? 'success' : 'warning'">
                                {{ row.status }}
                            </el-tag>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </div>

        <!-- 消费记录 -->
        <div class="consumption-section">
            <el-card shadow="never" class="consumption-card">
                <template #header>
                    <span class="card-title">消费记录</span>
                </template>
                <el-table :data="consumptionData" stripe border>
                    <el-table-column prop="orderId" label="订单ID" />
                    <el-table-column prop="productName" label="商品名称" />
                    <el-table-column prop="productType" label="商品类型" />
                    <el-table-column prop="price" label="价格" align="right">
                        <template #default="{ row }">
                            {{ row.price }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="quantity" label="数量" align="center" />
                    <el-table-column prop="total" label="总计" align="center">
                        <template #default="{ row }">
                            {{ row.total }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="transactionTime" label="交易时间" width="180" />
                </el-table>
            </el-card>
        </div>

    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ArrowLeft, User } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { getMemberById } from '@/api/member/member';
import { Member } from '@/types/member';

const route = useRoute();
const router = useRouter();

// 会员基本信息
const memberInfo = ref<Member>({
    id: '',
    name: '',
    account: '',
    vipLevel: 0,
    userType: 0,
    userTypeName: '',
    registerTime: '',
    lastLoginTime: '',
    phone: '',
    location: '',
    avatar: '',
    nickname: '',
    birthDate: '',
    interests: [],
    status: 1,
    statusName: '',
    createTime: '',
    updateTime: '',
    createBy: '',
    updateBy: '',
    memberLevelId: '',
    memberLevelName: '',
    totalEnergy: 0,
    currentEnergy: 0,
    inviteCode: '',
    inviterId: '',
    inviterName: ''
});

// 加载状态
const loading = ref(false);

// 消费记录数据
const consumptionData = ref([
    {
        orderId: '323424443',
        productName: 'ihone13',
        productType: '商品',
        price: '20.00',
        quantity: '12',
        total: '480.00',
        transactionTime: '2025-07-07 12:33:32'
    }
]);

// 账号资产数据
const assetsData = ref([
    {
        assetType: '能量',
        assetName: '能量数',
        quantity: '11000',
        unit: '点',
        value: '110.00',
        expireDate: '2025-12-31',
        status: '有效'
    }
]);

// 格式化时间
const formatDateTime = (dateStr: string) => {
    if (!dateStr) return '-';
    try {
        const date = new Date(dateStr);
        return date.toLocaleString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit'
        });
    } catch (error) {
        return dateStr;
    }
};

// 格式化日期
const formatDate = (dateStr: string) => {
    if (!dateStr) return '-';
    try {
        const date = new Date(dateStr);
        return date.toLocaleDateString('zh-CN');
    } catch (error) {
        return dateStr;
    }
};

// 获取会员等级标签类型
const getLevelTagType = (level: string) => {
    const levelMap: { [key: string]: string } = {
        'VIP1': 'warning',
        'VIP2': 'success',
        'VIP3': 'danger',
        '普通会员': 'info'
    };
    return levelMap[level] || 'info';
};

// 返回上一页
const goBack = () => {
    router.go(-1);
};

// 加载会员详情
const loadMemberDetail = async (id: string) => {
    try {
        loading.value = true;
        console.log('加载会员详情:', id);
        
        const res = await getMemberById(id);
        console.log('API响应:', res);
        
        const responseData = res as any;
        if (responseData && responseData.code === 200 && responseData.data) {
            memberInfo.value = responseData.data;
            console.log('会员详情数据:', memberInfo.value);
        } else {
            const errorMsg = (responseData && responseData.msg) || '获取会员详情失败';
            ElMessage.error(errorMsg);
        }
    } catch (error) {
        console.error('获取会员详情失败:', error);
        ElMessage.error('网络错误，请稍后重试');
    } finally {
        loading.value = false;
    }
};

// 页面初始化
onMounted(() => {
    const memberId = route.params.id;
    console.log('会员ID:', memberId);
    if (memberId) {
        loadMemberDetail(memberId as string);
    }
});
</script>

<style scoped>
.member-detail-container {
    padding: 20px;
    background-color: #f5f5f5;
    min-height: 100vh;
}

/* 页面头部 */
.page-header {
    margin-bottom: 20px;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-left h2 {
    margin: 0;
    color: #303133;
    font-size: 24px;
    font-weight: 600;
}

/* 会员头部信息 */
.member-header {
    margin-bottom: 20px;
}

.header-card {
    border-radius: 8px;
}

.member-profile {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 20px;
}

.profile-avatar {
    flex-shrink: 0;
}

.profile-info {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.info-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.info-row .label {
    color: #606266;
    font-size: 14px;
    min-width: 80px;
}

.info-row .value {
    color: #303133;
    font-size: 14px;
    font-weight: 500;
}

/* 信息区域 */
.info-section,
.assets-section,
.consumption-section {
    margin-bottom: 20px;
}

.info-card,
.assets-card,
.consumption-card {
    border-radius: 8px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-title {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
}

/* 描述列表样式 */
:deep(.el-descriptions__label) {
    font-weight: 600;
    color: #606266;
    width: 120px;
}

:deep(.el-descriptions__content) {
    color: #303133;
}

/* 表格样式 */
:deep(.el-table) {
    border-radius: 8px;
    overflow: hidden;
}

:deep(.el-table th) {
    background-color: #fafafa;
    color: #606266;
    font-weight: 600;
}

:deep(.el-table td) {
    padding: 12px 0;
}


/* 卡片样式 */
:deep(.el-card__header) {
    padding: 15px 20px;
    border-bottom: 1px solid #ebeef5;
    background-color: #fafafa;
}

:deep(.el-card__body) {
    padding: 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .member-detail-container {
        padding: 10px;
    }
    
    .header-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .member-profile {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    
    .profile-info {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    
    :deep(.el-descriptions) {
        --el-descriptions-item-bordered-label-background: #fafafa;
    }
}
</style>
